﻿<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Administrator/Administrator.Master" CodeBehind="DettaglioAnnuncio.aspx.vb" Inherits="TecnoHouse.DettaglioAnnuncio" ValidateRequest="false" EnableEventValidation="false"   %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="Stylesheet" type="text/css" href="/GUI/css/jHtmlArea/jHtmlArea.css" />
    <link rel="Stylesheet" href="/GUI/css/fileuploader.css" />
    <link rel="Stylesheet" href="/GUI/css/jquery.lightbox-0.5.css" />
    <script type="text/javascript" src="/GUI/js/jHtmlArea-0.7.0.min.js"></script>
    <script type="text/javascript" src="/GUI/js/jquery.validate.min.js"></script> 
    <script type="text/javascript" src="/GUI/js/jquery.validate-it.js"></script>
    <script type="text/javascript" src="/GUI/js/jquery.ui.datepicker-it.js"></script>
    <script type="text/javascript" src="/GUI/js/fileuploader.js"></script> 
    <script type="text/javascript" src="/GUI/js/jquery.elastic.js"></script> 
    <script type="text/javascript" src="/GUI/js/textLimit.min.js"></script> 
    <script type="text/javascript" src="/GUI/js/jquery.lightbox-0.5.min.js"></script>
    <style type="text/css">
        h3 {text-align: left;}
        h3 canvas {margin-left: 30px;}
        #uploaded .ui-state-highlight { height: 100px; width: 100px; }       
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=<%=apikey %>"></script>
    <script type="text/javascript">
    
          var geocoder;
          var map;
          function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(41.114409, 16.495285);
            var myOptions = {
              zoom: 10,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map"), myOptions);
          }

          function codeAddress() {
            var address = $("#<%=txtIndirizzo.ClientID %>").val() + " " + $("#<%=txtComune.ClientID %>").val();
            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
                map.setZoom(16);
              }
            });
          }

    
        $(function() {
                
            var IDImmagine = 0;
            
            $("#<%=txtDescrizione.ClientID %>").htmlarea();
            $("#btnannulla").click(function(e) {
                e.preventDefault();
                $("#confirm-dialog").dialog("open");
            });
            $(".button").button();
            $(".date").datepicker({
                showOn: "both",
                dateFormat: "dd/mm/yy",
                buttonImage: "/GUI/images/calendar.png",
                buttonImageOnly: true
            });
            $("#confirm-dialog").dialog({
                autoOpen: false,
                modal: true,
                position: 'top',
                buttons: {
                    "Ok": function() { window.location = "/Administrator/Annunci.aspx"; },
                    "Annulla": function() { $(this).dialog("close"); }
                }
            });
            
            $("#delete-dialog").dialog({
                autoOpen: false,
                modal: true,
                position: 'top',
                buttons: {
                    "Ok": function() { 
                          $.ajax({
                                url: "/BLL/hndAnnuncio.ashx",
                                type: "POST",
                                data: {
                                    op: "DeleteImage",
                                    IDAnnuncio: "<%=IDAnnuncio %>",
                                    IDImmagine: IDImmagine
                                },
                                success: function(data) {
                                    $("#delete-dialog").dialog("close");
                                    if (data != "0") 
                                        $("#IMG_" + IDImmagine).remove();
                                    else 
                                        $("#dialog").html("Si è verificato un errore. Riprova più tardi").dialog("open");
                                }
                            });
                        },
                    "Annulla": function() { $(this).dialog("close"); }
                }
            });
            
            
            $("#update-dialog").dialog({
                autoOpen: false,
                modal: true,
                position: 'top',
                buttons: {
                    "Ok": function() { 
                        if ($("#descr").val() != ""){
                              $.ajax({
                                    url: "/BLL/hndAnnuncio.ashx",
                                    type: "POST",
                                    data: {
                                        op: "UpdateImage",
                                        IDAnnuncio: "<%=IDAnnuncio %>",
                                        IDImmagine: IDImmagine,
                                        Descr: $("#descr").val()
                                    },
                                    success: function(data) {
                                        $("#update-dialog").dialog("close");
                                        if (data != "0") {
                                            $("#IMG_" + IDImmagine).attr("title",$("#descr").val());
                                            $("li").tipsy({gravity:"n"});
                                        }
                                        else 
                                            $("#dialog").html("Si è verificato un errore. Riprova più tardi").dialog("open");
                                    }
                                });
                            }
                            else{
                                $("#descr").next("span").show();
                                $("#descr").css("border","1px dotted red");                              
                            }
                        },
                    "Annulla": function() { $(this).dialog("close"); }
                }
            });
            
            $(".imgdelete").click(function(){
                IDImmagine = $(this).parents("li").attr("id").replace("IMG_","");
                $("#delete-dialog").dialog("open");
            });
            
            $(".imgupdate").click(function(){
                IDImmagine = $(this).parents("li").attr("id").replace("IMG_","");
                var title = ($("#IMG_"+IDImmagine).attr("title") != "") ? $("#IMG_"+IDImmagine).attr("title") : $("#IMG_"+IDImmagine).attr("original-title");
                if (title != "")
                    $("#descr").val(title);
                $("#update-dialog").dialog("open");
            });
            
            $("#descr").textLimit(255, function(length, limit) {
                                $("#max-chars").find("span").text(limit - length);
                            });
            
            $("#<%=txtPrezzo.ClientID %>").ForceNumericOnly();
            $("#<%=txtMQ.ClientID %>").ForceNumericOnly();
            $("#<%=txtVani.ClientID %>").ForceNumericOnly();
            $("#<%=txtBagni.ClientID %>").ForceNumericOnly();
            $("#<%=txtCAP.ClientID %>").ForceNumericOnly();
            $("#<%=txtPiano.ClientID %>").ForceNumericOnly();
            $("#<%=txtAnnoFabbricazione.ClientID %>").ForceNumericOnly();
            $("<%=btnsalva.ClientID %>").click(function() { document.forms[0].submit(); });

            $.validator.addMethod('selectNone',
                      function(value, element) {
                          return this.optional(element) || value > 0
                      }, "Seleziona un elemento");

          $(document.forms[0]).validate();

          $("#<%=txtComune.ClientID %>").autocomplete({
              source: function(request, response) {
                  $.ajax({
                      url: '/BLL/hndSearch.ashx',
                      type: "GET",
                      dataType: "json",
                      data: {
                          op: "GetComuni",
                          limit: 10,
                          query: request.term
                      },
                      success: function(data) {
                          response($.map(data, function(item) {
                              return {
                                  label: item.comune,
                                  value: item.comune,
                                  id: item.idcomune
                              }
                          }))
                      }
                  })
              },
              minLength: 3,
              select: function(event, ui) {
                  $("#<%=hfComune.ClientID %>").val(ui.item.id);
              }
          });
          
          $("#accordion").tabs({
            show: function(event, ui) {
                if (ui.panel.id == "mappa") {
                    google.maps.event.trigger(map, 'resize');
                    map.setZoom( map.getZoom() );
                    if ($("#<%=txtComune.ClientID %>").val() != "")
                        codeAddress();
                }
            }            
          }); 
            
          $("li").tipsy({gravity:"n"});
            
          $("span").tipsy({gravity: "s"});
          
          $("#uploaded").sortable({
            placeholder: "ui-state-highlight",
            update: function(){
               $("#<%=hfImmaginiOrdine.ClientID %>").val("");
               $("#uploaded").find("li").each(function(index){ 
                    $prev = $("#<%=hfImmaginiOrdine.ClientID %>").val(); 
                    $("#<%=hfImmaginiOrdine.ClientID %>").val($prev + $(this).attr("id").replace("IMG_","") + ",");
               });
            }
          });

          var uploader = new qq.FileUploader({
              element: $("#uploader")[0],
              action: '/BLL/hndUpload.ashx',
              params:  { 'id': '<%=IDAnnuncio %>','type':'img'},
              allowedExtensions: [<%=photoExt %>],    
              sizeLimit: <%=maxPhotoSize %>,  
              minSizeLimit: 0,
              onComplete: function(id, fileName, responseJSON){
                    if (responseJSON != 0)
                    {    
                        $imgPath = "/BLL/hndImage.ashx?adID=<%=IDAnnuncio %>&h=150&filename=" + fileName;    
                        $("ul#uploaded").append("<li title='" + fileName + "' style='background: red'><img src='" + $imgPath + "' border='0' alt='Immagine' /></li>");                         
                        $oldval = $("#<%=hfImmagini.ClientID %>").val();
                        $("#<%=hfImmagini.ClientID %>").val($oldval + fileName + ",");
                    }
              },
              showMessage: function(message){ $("#dialog").html(message).dialog("open"); }
          });
            
          $(".watermark").watermark();

          $("#uploaded a").lightBox();                  
        
          initialize();   
          
          if ($("#<%=txtComune.ClientID %>").val() != "")
            codeAddress();
          
          $("#btnfind").click(function(){
            codeAddress();
          });      
            
        });
        
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
    <div id="confirm-dialog" title="Attenzione">
        Se abbandoni la schermata senza salvare, le modifiche andranno perse. Continuare?
    </div>
    <div id="delete-dialog" title="Attenzione">
        Sei sicuro di voler eliminare l'immagine selezionata?
    </div>
    <div id="update-dialog" title="Descrizione Immagine">
        <%-- <input id="descr" type="text" title="Immetti la descrizione dell'immagine" class="watermark" maxlength="255" size="40" />--%>
        <textarea id="descr" cols="35" rows="4" title="Immetti la descrizione dell'immagine" class="watermark"></textarea>
        <span id="max-chars">Rimanenti: <span>255</span></span>
        <label for="descr" class="error" style="display:none">Obbligatorio</label>
    </div>
    <h1>Nuovo Annuncio</h1>
    <div id="annuncio_form">   
        <div id="accordion">
            <ul>
                <li><a href="#detail"><span>Dettagli</span></a></li>
                <li><a href="#mappa"><span>Mappa</span></a></li>
                <li><a href="#images"><span>Immagini</span></a></li>
            </ul>
            <div id="detail">
                <table>
                    <tr>
                        <td width="30%">Titolo:</td>
                        <td><asp:TextBox ID="txtTitolo" runat="server" MaxLength="50" CssClass="required"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td width="30%">Riferimento:</td>
                        <td><asp:TextBox ID="txtRiferimento" runat="server" MaxLength="50"></asp:TextBox></td>
                    </tr>
                    <tr>
                        <td>Tipo Contratto:</td>
                        <td>
                            <asp:DropDownList ID="ddlContratto" runat="server" DataTextField="Descrizione" DataValueField="ID" CssClass="selectNone">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>Condizione:</td>
                        <td>
                            <asp:DropDownList ID="ddlCondizione" runat="server" DataTextField="Descrizione" DataValueField="ID" CssClass="selectNone">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>Tipo Immobile:</td>
                        <td>
                            <asp:DropDownList ID="ddlImmobile" runat="server" DataTextField="Descrizione" DataValueField="ID" CssClass="selectNone">
                            </asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>Metri Quadrati:</td>
                        <td>
                            <asp:TextBox ID="txtMQ" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Vani:</td>
                        <td>
                            <asp:TextBox ID="txtVani" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Bagni:</td>
                        <td>
                            <asp:TextBox ID="txtBagni" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Anno Fabbricazione:</td>
                        <td>
                            <asp:TextBox ID="txtAnnoFabbricazione" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Termoautonomo:</td>
                        <td>
                            <asp:RadioButton ID="rbTermoSi" runat="server" GroupName="grTermo" Checked="true" Text="Si" />
                            <asp:RadioButton ID="rbTermoNo" runat="server" GroupName="grTermo" Text="No" />
                        </td>
                    </tr>
                    <tr>
                        <td>Piano:</td>
                        <td>
                            <asp:TextBox ID="txtPiano" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Data Pubblicazione:</td>
                        <td>
                            <asp:TextBox ID="txtDataPubblicazione" runat="server" CssClass="date"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Data Scadenza:</td>
                        <td>
                            <asp:TextBox ID="txtDataScadenza" runat="server" CssClass="date"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Descrizione:</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <textarea id="txtDescrizione" cols="80" rows="10" runat="server" class="required"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>Prezzo:</td>
                        <td>
                            <asp:TextBox ID="txtPrezzo" runat="server" CssClass="required"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="mappa">
                <table>
                    <tr>
                        <td>Comune:</td>
                        <td>
                            <asp:TextBox ID="txtComune" runat="server" CssClass="required watermark" title="Digita il comune" ></asp:TextBox>
                            <asp:HiddenField ID="hfComune" runat="server"/>
                        </td>                        
                    </tr>
                    <tr>
                        <td>Indirizzo:</td>
                        <td>
                            <asp:TextBox ID="txtIndirizzo" runat="server" MaxLength="255"  CssClass="required"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>CAP:</td>
                        <td>
                            <asp:TextBox ID="txtCAP" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">                
                            <a id="btnfind" href="#" class="fg-button fg-button-icon-left ui-state-default ui-corner-all">
                            <span class="ui-icon ui-icon-search"></span>Trova</a>
                        </td>
                    </tr>
                </table>
                <div id="mapcontainer">
                    <div id="map"></div>
                </div>
            </div>
            <div id="images">
                <div id="uploader">       
                    <noscript>          
                        <p>Devi abilitare JavaScript nel tuo browser per poter fare l'upload di file</p>
                        <!-- or put a simple form for upload here -->
                    </noscript>         
                </div>                
                <div class="clearer"></div>
                <ul style="color: rgb(153, 153, 153); font-size: 11px;list-style-type: square;margin-left: 15px">
                    <li>Per caricare nuove immagini, clicca sul pulsante oppure trascinale nel riquadro.</li>
                    <li>Puoi caricare più immagini alla volta.</li>
                    <li>Le immagini col bordo rosso sono quelle appena caricate. Devi salvare l'annuncio per poterle modificare, 
                    ordinare o eliminare. Se esci, le immagini evidenziate non verranno salvate.</li>
                </ul>
                <div class="clearer"></div>
                <ul id="uploaded">
                    <asp:Repeater ID="rpImmagini" runat="server">
                        <ItemTemplate>
                            <li id="IMG_<%#DataBinder.Eval(Container.DataItem, "IDImmagine")%>" title="<%#DataBinder.Eval(Container.DataItem, "Descrizione")%>">
                                <div class="imgtoolbar">
                                    <span class="ui-icon ui-icon-arrow-4-diag" title="Sposta"></span>
                                    <span class="ui-icon ui-icon-pencil imgupdate" title="Modifica Descrizione"></span>
                                    <span class="ui-icon ui-icon-closethick imgdelete" title="Elimina"></span>
                                </div>
                                <a href="/BLL/hndImage.ashx?adID=<%=IDAnnuncio %>&id=<%#DataBinder.Eval(Container.DataItem, "IDImmagine")%>">
                                    <img src="/BLL/hndImage.ashx?adID=<%=IDAnnuncio %>&id=<%#DataBinder.Eval(Container.DataItem, "IDImmagine")%>&h=100&w=100" alt="Immagine" />
                                </a>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
                <div class="clearer"></div>
          </div>
        </div>
        <div class="clearer"></div>
        <div id="toolbar">
            <asp:Button ID="btnsalva" runat="server" Text="salva" CssClass="button" />
            <button id="btnannulla" class="button">annulla</button>
            <asp:HiddenField ID="hfIDAnnuncio" runat="server" />
            <asp:HiddenField ID="hfImmagini" runat="server" />
            <asp:HiddenField ID="hfImmaginiOrdine" runat="server" />
        </div>
    </div>
</asp:Content>
